<template>
  <div style="height: 100vh; flex-direction: column">
    <!-- 固定导航栏 -->
    <!-- border-bottom: 1px solid #dbd3d3; -->
    <div
      style="
        display: flex;
        align-items: center;
        height: 70px;
        width: 100%;
        background-color: #fff;
        border-bottom: 1px solid #dbd3d3;
        border-top: 1px solid #dbd3d3;
        position: fixed;
        top: 0;
        z-index: 10;
      "
    >
      <!-- 最上面的logo开始 -->
      <div>
        <a href="/product" class="logo">
          <img
            style="width: 260px; height: 70px; margin-left: 100px"
            src="../assets/fysclogo.jpg"
          />
        </a>
      </div>
      <!-- logo结束 -->
      <!-- 顶部的中间的导航开始 -->
      <div style="margin-left: 200px">
        <el-menu
          :default-active="currentView"
          class="nav-menu"
          mode="horizontal"
          active-text-color="#409EFF"
          text-color="#000000"
          @select="handleSelect"
        >
          <el-menu-item
            :index="item.name"
            v-for="item in tab"
            :key="item.index"
            >{{ item.label }}</el-menu-item
          >
        </el-menu>
      </div>
      <!-- 顶部的中间的导航结束 -->

      <div style="margin-left: 100px;" v-if="headImg == null ? true : false">
        <el-link :underline="false" href="/login" type="primary" target="_blank">还没登录？点击这里登录吧</el-link>
      </div>
      <div v-if="headImg == null ? false : true">
        <!-- 头像框开始 -->
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <!-- shape="square" 方形 -->
            <el-avatar :src="headImg" :size="50"></el-avatar>
            <i class="el-icon-arrow-down el-icon--right icon-arrow"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="PersonView">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 头像框结束 -->
      </div>
    </div>

    <!-- 动态组件加载开始 -->
    <div
      style="
        width: 90%;
        flex: 1;
        padding: 0px;
        margin: 0px auto 0px;
        overflow-y: auto;
      "
    >
      <component
        v-show="bookId == null ? true : false"
        :key="currentView"
        :is="currentView"
        :post="judgeAddPost"
        @listToProduct="handleListSent"
        @xiugaitouxiang="xiugaitouxiang"
        @toProductView="toAddPost"
        @noshowEditPost="noshowEditPost"
      ></component>
      <component
        v-if="bookId == null ? false : true"
        :is="currentBook"
        :bookId="bookId"
        @detailsGoBack="detailsBack"
      ></component>
    </div>
    <!-- 动态组件加载结束 -->
  </div>
</template>


<script>
import ListView from "@/components/ListView.vue";
import PostView from "@/components/PostView.vue";
import PersonView from "@/components/PersonView.vue";
import NoticeView from "@/components/NoticeView.vue";
import DetailesView from "@/components/DetailesView.vue";
import { logout } from "../api/usrMG";

export default {
  components: { ListView, PostView, PersonView, NoticeView, DetailesView },
  data() {
    return {
      judgeAddPost: false,
      classList: [
        //从后端获取的类别的列表类别可以从数据库单独获取，这里应该是一来这个页面就访问这个接口
      ],
      bookCons: {
        bookName: "", //查询条件书名和作者
        classId: "", //类别,如果没选择就不走这个判定，后端要注意一下
        author: "", //作者
        startPrice: "", //钱的区间最小钱,这两个价格为空时候就查0-99999.00//应该不会大于这个99999
        endPrice: "", //最大钱
      },
      headImg: localStorage.getItem("head"),
      tab: [
        {
          index: 1,
          label: "首页",
          name: "ListView",
        },
        {
          index: 2,
          label: "交流",
          name: "PostView",
        },
        {
          index: 3,
          label: "公告",
          name: "NoticeView",
        },
      ],
      currentView: "ListView", // 默认显示ListView组件
      bookId: null, // 当前选中的书籍的id，只有点击某本书这里才有值，点击其他地方的按钮，这里都为null，当详情界面点击返回这里也会变为null
      currentBook: "DetailesView", // 当前选中的书籍的组件，只有点击某本书这里才有值，点击其他地方的按钮，这里都为null，这里也是
    };
  },
  methods: {
    noshowEditPost() {
      //接收到论坛界面传过来的事件，设置为false意思是直接点击个人中心不会跳转到EditPost界面
      this.judgeAddPost = false;
    },
    //接收到论坛界面传过来的事件，因此这里就改变当前页面去到个人中心的添加界面
    toAddPost() {
      this.judgeAddPost = true;
      this.currentView = "PersonView";
    },
    xiugaitouxiang() {
      //触发事件传递会父组件Person，再在父组件触发事件传递给ProductView界面来修改导航栏的头像的值
      this.headImg = localStorage.getItem("head");
    },

    handleCommand(command) {
      //这里处理的是头像框旁边的那个东西，登录了才能显示
      if (command === "logout") {
        logout(localStorage.getItem("userId")).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
            localStorage.removeItem("userId");
            localStorage.removeItem("head");
            location.href = "/product"
          } else {
            this.$message.error(res.data.code + "::" + res.data.msg);
          }
        }).catch(err=>{alert(err)});
      } else {
        this.currentView = command; //不是上面那就只能是去个人中心了
        this.bookId = null; // 当前选中的书籍的id，只有点击某本书这里才有值，点击其他地方的按钮，这里都为null，当详情界面点击返回这里也会变为null
      }
    },
    detailsBack() {
      //从详情界面返回触发这个事件哦
      this.bookId = null;
      // this.currentBook = null;
    },
    handleListSent(id) {
      //从子组件ListView传回一个参数，获取这个参数并赋值给对应的值
      this.bookId = id;
      // this.currentBook = "DetailesView";
    },
    handleSelect(key, keyPath) {
      //这里设置的时动态路由的具体显示的谁
      this.bookId = null;
      console.log(key, keyPath);
      // this.activeIndex = key;
      this.currentView = key; // 根据key动态设置要显示的组件
    },
  },
  computed: {
    // currentPage() {
    //   if (this.bookId == null) {
    //     return this.currentView;
    //   } else {
    //     return this.currentBook;
    //   }
    // },
  },
  // mounted() {},
};
</script>
 
<style scoped>
/* el-link设置css */
.el-link {  
  color: #969393 !important;
}
.el-link:hover {  
  color: #f51414 !important;
} 


/* el-link设置css */


.nav-menu {
  width: 450px !important;
  border-bottom: 0px solid #eee !important;
  height: 60px;
  margin: 0px auto !important;
}
/* .设置每一个导航栏的字体和间隔, */
.el-menu-item {
  font-size: 25px !important;
  padding: 0 40px !important;
}
/* 设置导航文字的高度的还有些其他的东西 */
.el-menu--horizontal > .el-menu-item {
  height: 70px !important;
}
/* 搜索容器 */
.searchContainer {
  padding: 20px 0;
  display: flex;
  margin-left: 0px;
}

.searchBar > input {
  border-radius: 50px !important;
  width: 200px;
}
/* 搜索按钮 */
#searchBtn {
  transform: translate(-100%, 0);
}
.el-dropdown-link {
  /* 设置头像框那个位置的样式 */
  width: 70px;
  margin: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.divider-container {
  /** 这里设置的是短横线那里的el-col*/
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.divider {
  /** 这里设置的是短横线那里的span*/
  font-size: 18px; /* 或你需要的任何大小 */
  color: #000; /* 或你需要的任何颜色 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: auto 0px;
}
</style>
